<template>
    <div>
        <v-stepper v-model="current" vertical>
                <v-stepper-step :complete="current > 0" step="0">
                    <div>
                        <div>请给本次批处理取个好听的名字</div>
                        <v-chip class="my-2" color="teal">Project Name</v-chip>
                        <v-chip v-if="project !=''" class="my-2">{{project}}</v-chip>
                    </div>
                </v-stepper-step>
                <v-stepper-content step="0">
                    <v-card class="mx-auto" max-width="400">
                        <v-card-text>
                            <v-text-field
                                    label="项目名称"
                                    placeholder="Project Name"
                                    v-model="project"
                                    max-width="500px"
                            >
                                <template v-slot:append-outer>
                                    <!--                        <v-icon v-if="project != ''" text color="primary" @click="current = 1">mdi-home</v-icon>-->
                                    <v-btn text color="primary" @click="step0next">下一步</v-btn>
                                </template>
                            </v-text-field>
                        </v-card-text>
                    </v-card>

                    <!--            <v-btn color="primary" @click="current = 1">Continue</v-btn>-->
                    <!--            <v-btn text>Cancel</v-btn>-->
                </v-stepper-content>

                <v-stepper-step :complete="current > 1" step="1">
                    <div>
                        <div>上传待处理的电子表格，格式内容参考下例</div>
                        <v-chip class="my-2" color="teal"> Office 2007+</v-chip>
                        <v-chip class="my-2"> .xlsx</v-chip>
                    </div>
                    <!--            <small>如下例所示，后缀名必须是.xlsx</small>-->
                </v-stepper-step>

                <v-stepper-content step="1">
                    <v-card class="mx-auto" max-width="400">

                        <v-card-text>
                            <v-simple-table>
                                <template v-slot:default>
                                    <thead>
                                    <tr>
                                        <th class="text-center">序号</th>
                                        <th class="text-center">姓名</th>
                                        <th class="text-center">年龄</th>
                                        <th class="text-center">学校</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="item in desserts" :key="item.name">
                                        <td class="text-center">{{item.id}}</td>
                                        <td class="text-center">{{ item.name }}</td>
                                        <td class="text-center">{{ item.age }}</td>
                                        <td class="text-center">{{item.school}}</td>
                                    </tr>
                                    </tbody>
                                </template>
                            </v-simple-table>
                        </v-card-text>

                        <v-card-actions>
                            <input v-show="false" type="file" ref="uploadexcel"
                                   @change="changeexcel"
                                   accept=".xlsx">
                            <v-btn
                                    block
                                    class="white--text"
                                    color="deep-purple accent-4"
                                    @click="uploadexcel"
                            >
                                Upload Excel
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-stepper-content>

                <v-stepper-step :complete="current > 2" step="2">
                    <div>
                        <div>上传模板文件,字段填充方式参考下例</div>
                        <v-chip class="my-2" color="teal"> Utf-8</v-chip>
                        <v-chip class="my-2"> .txt</v-chip>
                        <v-chip class="my-2"> .bat</v-chip>
                        <v-chip class="my-2"> .md</v-chip>
                    </div>
                    <!--            <small>后缀名可以是.txt, .bat, .cmd, .md等文本类型文件</small>-->
                </v-stepper-step>

                <v-stepper-content step="2">
                    <v-card class="mx-auto" max-width="400">
                        <v-card-text>
                            <v-textarea
                                    solo
                                    name="input-7-4"
                                    label="Solo textarea"
                                    v-model="example"
                                    disabled
                            ></v-textarea>
                        </v-card-text>

                        <v-card-actions>
                            <input v-show="false" type="file" ref="uploadplain"
                                   @change="changeplain"
                                   accept=".txt, .bat, .cmd, .md, .json">
                            <v-btn
                                    block
                                    class="white--text"
                                    color="deep-purple accent-4"
                                    @click="uploadplain"
                            >
                                Upload Plain
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-stepper-content>

                <v-stepper-step :complete="current > 3" step="3">
                    <div>
                        <div>指定生成的文件命名规则</div>
                        <v-chip class="my-2" color="teal">File Name</v-chip>
                        <v-chip v-if="filename !== ''" class="my-2"> {{filename}}</v-chip>
                    </div>
                </v-stepper-step>
                <v-stepper-content step="3">
                    <v-card class="mx-auto" max-width="400">
                        <v-card-text>
                            <v-text-field
                                    rows="3"
                                    label="命名规则"
                                    placeholder="FileName Rule"
                                    v-model="filename"
                                    max-width="500px"
                                    disabled
                            ></v-text-field>
                        </v-card-text>

                        <v-divider class="mx-4"></v-divider>

                        <v-card-text>
                            <span class="subheading">选择字段</span>

                            <v-chip-group
                                    v-model="selection"
                                    active-class="deep-purple--text text--accent-4"
                                    multiple
                                    column
                            >
                                <v-chip v-for="size in options" :key="size" :value="size">
                                    {{ size }}
                                </v-chip>
                            </v-chip-group>
                        </v-card-text>

                        <v-card-actions>
                            <v-btn
                                    block
                                    class="white--text"
                                    color="deep-purple accent-4"
                                    @click="actionwait"
                            >
                                Upload Plain Text
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-stepper-content>

                <v-stepper-step :complete="current > 4" step="4">下载结果</v-stepper-step>
                <v-stepper-content step="4">
                    <v-card class="mx-auto" max-width="400">
                        <v-card-text class="text-center">
                            <v-progress-circular
                                    :rotate="360"
                                    :size="100"
                                    :width="15"
                                    value="100"
                                    color="success"
                            >100%
                            </v-progress-circular>
                        </v-card-text>
                        <v-card-actions>
                            <v-btn
                                    block
                                    class="white--text"
                                    color="deep-purple accent-4"
                                    @click="download"
                            >
                                Download
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-stepper-content>
        </v-stepper>

    </div>
</template>

<script>
    import {mapGetters} from "vuex"
    import {
        UploadFileExcel,
        UploadFilePlain,
        ExecuteBatch,
        DownloadBatch
    } from "@/api/batch";

    export default {
        data() {
            return {
                project: "",
                source: "",
                template: "",
                options: ["序号", "姓名", "年龄", "学校", "Year",
                    "Month", "Date", "Day",
                    "Hour", "Minute", "Second", "-", "_"],
                selection: [],
                current: 0,
                desserts: [
                    {id: 1, name: "小明", age: 11, school: "光明小学"},
                    {id: 2, name: "小红", age: 10, school: "实验小学"},
                    {id: 3, name: "小花", age: 12, school: "实验小学"},
                ],
                example: "大家好！\n我是{{ .姓名 }}，今年{{ .年龄 }}岁了。\n我来自{{ .学校 }}。\n希望能成为大家的好朋友！"
            }
        },
        computed: {
            ...mapGetters("app", ["isMobile"]),
            filename() {
                return this.selection.map(item => {
                    return "-_".includes(item)
                        ? item
                        : "{{ ." + item + " }}"
                }).join("")
            }
        },
        methods: {
            step0next() {
                if (this.project !== "") {
                    this.current = 1
                }
            },
            uploadexcel() {
                let uploadbtn = this.$refs.uploadexcel
                uploadbtn.click()

            },
            async changeexcel(e) {
                let formData = new FormData()
                formData.append('file', e.target.files[0])
                console.log(formData)
                UploadFileExcel(formData, this.project).then(res => {
                    this.$msg.info(res.data.msg)
                    this.source = res.data.body.dst;
                    this.options = res.data.body.header;
                    this.current += 1
                })
            },
            uploadplain() {
                let uploadbtn = this.$refs.uploadplain
                uploadbtn.click()

            },
            async changeplain(e) {
                let formData = new FormData()
                formData.append('file', e.target.files[0])
                console.log(formData)
                // await myServiece.fun(formData)
                UploadFilePlain(formData, this.project).then(res => {
                    this.$msg.info(res.data.msg)
                    this.template = res.data.body
                    this.current += 1
                })
            },
            actionwait() {
                let params = {
                    project: this.project,
                    filename: this.filename,
                    source: this.source,
                    template: this.template,
                }
                ExecuteBatch(params).then(res => {
                    this.$msg.info(res.data.msg)
                    this.current += 1
                })
            },
            download() {
                DownloadBatch({"project": this.project}, this.project + ".zip")
            },
        }
    }
</script>
<style scoped lang="css">
    .upload {
        top: 50px;
        position: relative;
        /*border-radius: 2px;*/
    }

</style>